<template>
	<view class="main">
		<view id="customNav" class="custom-nav" :style="{ height: navHeight, paddingTop: statusBarHeight }">
			<up-icon :name="source ? 'home' : 'arrow-left'" color="#fff" size="24" @click="handleBack"></up-icon>
		</view>
		<image class="img" :src="src" mode="aspectFill"></image>
		<view class="bottom" @click="handlePreview(src)">
			<up-icon v-if="$store.state.configInfo.adEnabled.wallpaperAdStatus" name="lock" color="#fff"
				size="24"></up-icon>
			保存图片
		</view>
	</view>
</template>

<script>
import adVideo from '@/utils/adVideo';
export default {
	mixins: [adVideo],
	data() {
		return {
			navHeight: "",
			statusBarHeight: "",
			src: '',
			source: '', //如果有值，则表示从非本站进入
		}
	},
	onLoad(options) {

		// #ifdef MP-WEIXIN
		// 获取系统信息
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = `${systemInfo.statusBarHeight}px`; // 状态栏高度

		// 获取胶囊按钮信息
		const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
		// 计算导航栏高度（胶囊底部 + 10px）
		this.navHeight = `${menuButtonInfo.height + 10}px`;
		// #endif
		this.src = options.src
		if (options.source) {
			this.source = options.source
		}
	},
	onShareAppMessage(res) {
		return {
			title: this.$store.state.configInfo.shareTitle,
			path: `/pages/preview/preview?src=${this.src}&source=${1}`,
			imageUrl: this.src
		}
	},
	onShareTimeline(res) {
		return {
			title: this.$store.state.configInfo.shareTitle,
			path: `/pages/preview/preview?src=${this.src}&source=${1}`,
			imageUrl: this.src
		}
	},
	methods: {
		handleBack() {
			if (this.source) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			} else {
				uni.navigateBack()
			}
		},
		handlePreview(src) {
			const newSrc = src.replace('http://', 'https://')
			if (this.$store.state.configInfo.adEnabled.wallpaperAdStatus) {
				this.handleDownload(newSrc)
			} else {
				this.saveImage(newSrc)
			}

		}
	}
}
</script>

<style scoped lang="scss">
.main {
	height: 100vh;

	.custom-nav {
		padding: 24rpx 32rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}

	.img {
		display: block;
		width: 100vw;
		height: 100vh;
	}

	.bottom {
		position: fixed;
		bottom: 50px;
		width: 600rpx;
		height: 100rpx;
		font-size: 38rpx;
		background-image: linear-gradient(to bottom right, #FE73DA, #FF9056);
		line-height: 100rpx;
		border-radius: 50rpx;
		color: #fff;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}
}
</style>